import React, { Component } from 'react';
import { HashRouter as Router, withRouter } from "react-router-dom";
import '../style/App.css';
import MenuData, {Routes} from './menu';
import { Layout, Menu, Icon} from 'antd';
const { Content, Sider} = Layout;
const SubMenu = Menu.SubMenu;

class App extends Component {
    state = {
        collapsed: false,
        shouldLogin: false,
        username:'',
        password:'',
        showPage:false
    };
    onCollapse = (collapsed) => {
        this.setState({ collapsed });
    };
    componentWillMount(){
        let userAccount = window.sessionStorage.getItem('token');
        if(!userAccount){
            window.location = '/login.html'
        }else{
            this.setState({showPage:true})
        }
    }
    componentDidMount() {
    }
    componentWillReceiveProps(){
    }
    render() {
        if (this.state.showPage) {
            return (
                <Layout style={{minHeight: '100vh'}}>
                    <Sider
                        collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}
                    >
                        <div className="logo">
                            <img src={require('../i/logo.png')}/>
                            <span className="logo-out" onClick={() => {sessionStorage.removeItem('token');window.location.reload()}}>退出登录</span>
                        </div>
                        <Menu
                            theme="dark"
                            defaultOpenKeys={['item0', 'sm0']}
                            mode="inline"
                            onClick={({item, key, keyPath}) => {
                                this.props.history.push(key);
                            }}
                        >
                            {MenuData.map((item, i) => {
                                if (item.subMenu) {
                                    return (
                                        <SubMenu
                                            key={'item' + i}
                                            title={<span><Icon type={item.icon}/><span>{item.text}</span></span>}
                                        >
                                            {item.subMenu.map((sm, k) => {
                                                    if (sm.subMenu) {
                                                        return (
                                                            <SubMenu
                                                                key={'sm' + k}
                                                                title={<span><Icon
                                                                    type={sm.icon}/><span>{sm.text}</span></span>}
                                                            >
                                                                {sm.subMenu.map((small, j) => {
                                                                    return (<Menu.Item
                                                                        key={small.link}>{small.text}</Menu.Item>)
                                                                })}
                                                            </SubMenu>
                                                        )
                                                    } else {
                                                        return (
                                                            <Menu.Item key={sm.link}>{sm.text}</Menu.Item>
                                                        )
                                                    }
                                                }
                                            )}
                                        </SubMenu>
                                    )
                                } else {
                                    return (
                                        <Menu.Item key={item.link}>
                                            <Icon type={item.icon}/>
                                            <span>{item.text}</span>
                                        </Menu.Item>
                                    )
                                }
                            })}
                        </Menu>
                    </Sider>
                    <Layout>
                        <Content style={{padding: '20px'}}>
                            <Routes/>
                        </Content>
                    </Layout>
                </Layout>
            )
        }else{
            return(
                <div></div>
            )
        }
    }
}

export default withRouter(App);
